<div class="page-title">
  <h1>
        数据表格
  </h1>
</div>
<!-- DataTables Example -->
<div class="row">
  <div class="col-lg-12">
    <div class="widget-container fluid-height clearfix">
      <div class="heading">
        <i class="icon-table"></i>数据表格排序
      </div>
      <div class="widget-content padded clearfix">
        <table class="table table-bordered table-striped" id="dataTable1">
          <thead>
            <th class="check-header hidden-xs">
              <label><input id="checkAll" name="checkAll" type="checkbox"><span></span></label>
            </th>
            <th>
              姓名
            </th>
            <th>
              职位
            </th>
            <th class="hidden-xs">
              Email
            </th>
            <th class="hidden-xs">
              添加日期
            </th>
            <th class="hidden-xs">
              状态
            </th>
            <th></th>
          </thead>
          <tbody>
            <tr>
              <td class="check hidden-xs">
                <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
              </td>
              <td>
                  初雪
              </td>
              <td>
                  客服
              </td>
              <td class="hidden-xs">
                robert@gmail.com
              </td>
              <td class="hidden-xs">
                8-15-2013
              </td>
              <td class="hidden-xs">
                <span class="label label-success">批准</span>
              </td>
              <td class="actions">
                <div class="action-buttons">
                  <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="check hidden-xs">
                <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
              </td>
              <td>
                  采萱
              </td>
              <td>
                  客服主管
              </td>
              <td class="hidden-xs">
                john@gmail.com
              </td>
              <td class="hidden-xs">
                8-15-2013
              </td>
              <td class="hidden-xs">
                <span class="label label-warning">拒绝</span>
              </td>
              <td class="actions">
                <div class="action-buttons">
                  <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="check hidden-xs">
                <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
              </td>
              <td>
                  怀玉
              </td>
              <td>
                  电销
              </td>
              <td class="hidden-xs">
                olivia@gmail.com
              </td>
              <td class="hidden-xs">
                8-15-2013
              </td>
              <td class="hidden-xs">
                <span class="label label-success">批准</span>
              </td>
              <td class="actions">
                <div class="action-buttons">
                  <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                </div>
              </td>
            </tr>
            <tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr><tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr><tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr><tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr><tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="check hidden-xs">
                    <label><input name="optionsRadios1" type="checkbox" value="option1"><span></span></label>
                </td>
                <td>
                    古兰
                </td>
                <td>
                    电销组长
                </td>
                <td class="hidden-xs">
                    elliot@gmail.com
                </td>
                <td class="hidden-xs">
                    8-15-2013
                </td>
                <td class="hidden-xs">
                    <span class="label label-success">批准</span>
                </td>
                <td class="actions">
                    <div class="action-buttons">
                        <a class="table-actions" href="#"><i class="icon-eye-open"></i></a><a class="table-actions" href="#"><i class="icon-pencil"></i></a><a class="table-actions" href="#"><i class="icon-trash"></i></a>
                    </div>
                </td>
            </tr>





          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- end DataTables Example -->

<script>
function initDatatablesPage() {
    
    /*
    # =============================================================================
    #   DataTables
    # =============================================================================
    */

    $("#dataTable1").dataTable({
      "sPaginationType": "full_numbers",
      aoColumnDefs: [
        {
          bSortable: false,
          aTargets: [0, -1]
        }
      ]
    });
    $('.table').each(function() {
      return $(".table #checkAll").click(function() {
        if ($(".table #checkAll").is(":checked")) {
          return $(".table input[type=checkbox]").each(function() {
            return $(this).prop("checked", true);
          });
        } else {
          return $(".table input[type=checkbox]").each(function() {
            return $(this).prop("checked", false);
          });
        }
      });
    });
    
    
}
    
$(document).ready(function() {
	LoadDatatablesScript(initDatatablesPage);
});
</script>